<template>
  <div>
    <com-header></com-header>
    <nav-bread>
      <span>Goods</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default" :class="{'cur': sortClass == 'default'}"
             @click="clickSort('default')">Default</a>
          <a href="javascript:void(0)" class="price" :class="{'cur': sortClass == 'price'}"
             @click="clickSort('price')">Price
          </a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="clickFilterBy">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="{'filterby-show': filterByShow == true}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" :class="{'cur': priceFilterChecked == 'all'}"
                     @click="clickFilterPrice('all')">All</a></dd>
              <dd v-for="(item, index) in priceFilter">
                <a href="javascript:void(0)" :class="{'cur': priceFilterChecked == index}"
                   @click="clickFilterPrice(index)">{{item.startPrice | currency('$')}} - {{item.endPrice | currency('$')}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="item in goodsList.list">
                  <div class="pic">
                    <a href="#"><img v-lazy="'static/' + item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.salePrice | currency('$')}}</div>
                    <div class="btn-area">
                      <a href="javascript:void(0);" class="btn btn--m" @click="clickAddCart(item)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"
                   v-show="loadingShow">
                <div style="text-align: center">
                  <img src="../assets/loading-spinning-bubbles.svg"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" :class="{'hidden': overlayShow == false}"></div>
    <modal v-bind:modalShow="modalShow" @closeModal="closeModal">
      <p slot="message">
        <svg class="icon-status-ok" v-if="addSuccess">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>{{modalMsg}}</span>
      </p>
      <div slot="btn-group">
        <a href="javascript:void(0);" class="btn btn--m" @click="closeModal" v-if="!addSuccess">关 闭</a>
        <a href="javascript:void(0);" class="btn btn--m" @click="closeModal" v-if="addSuccess">继续购物</a>
        <router-link class="btn btn--m btn--red" to="/cart" v-if="addSuccess">进入购物车</router-link>
      </div>
    </modal>
    <com-footer></com-footer>
  </div>
</template>

<script>
  import '../assets/css/base.css'
  import '../assets/css/product.css'
  import ComHeader from '../components/ComHeader'
  import ComFooter from '../components/ComFooter'
  import NavBread from '../components/NavBread'
  import Modal from '../components/Modal'
  import axios from 'axios'

  export default {
    name: 'goodsList',
    components: {
      ComHeader,
      ComFooter,
      NavBread,
      Modal
    },
    data() {
      return {
        goodsList: {
          count: 0,
          list: []
        },
        priceFilter: [
          {
            startPrice: 0,
            endPrice: 100
          },
          {
            startPrice: 100,
            endPrice: 500
          },
          {
            startPrice: 500,
            endPrice: 1000
          },
          {
            startPrice: 1000,
            endPrice: 2000
          }
        ],
        priceFilterChecked: 'all',
        overlayShow: false,
        filterByShow: false,
        page: 1,
        pageSize: 8,
        sortClass: 'default',
        busy: true,
        loadingShow: true,
        modalShow: false,
        modalMsg: '',
        addSuccess: false
      }
    },
    methods: {
      getGoodsList(more) {
        let params = {
          page: this.page,
          pageSize: this.pageSize,
          sort: this.sortClass == 'default' ? 1 : -1
        }
        if (this.priceFilterChecked != 'all') {
          params.priceFilter = this.priceFilter[this.priceFilterChecked - 0];
        }
        axios.get('/goods', {params: params}).then((res) => {
          if (res.data.status == 0) {
            if (more) {
              if (res.data.result.count < this.pageSize) {
                this.busy = true
                this.loadingShow = false
              } else {
                this.busy = false
              }
              this.goodsList.count = this.goodsList.count - 0 + res.data.result.count
              this.goodsList.list = this.goodsList.list.concat(res.data.result.list)
            } else {
              this.goodsList.count = res.data.result.count - 0
              this.goodsList.list = res.data.result.list
              this.busy = false
            }
          }
        })
      },
      clickFilterPrice(index) {
        this.priceFilterChecked = index
        this.overlayShow = false
        this.filterByShow = false
        this.page = 1
        this.busy = true
        this.loadingShow = true
        this.getGoodsList()
      },
      clickFilterBy() {
        this.overlayShow = true
        this.filterByShow = true
      },
      clickSort(sortClass) {
        this.sortClass = sortClass
        this.page = 1
        this.busy = true
        this.loadingShow = true
        this.getGoodsList()
      },
      loadMore: function () {
        this.busy = true
        setTimeout(() => {
          this.page++
          this.getGoodsList(true)
        }, 500)
      },
      clickAddCart(goods) {
        axios.post('/goods/addCart', goods).then((res) => {
          switch (res.data.status) {
            case 10001:
              this.modalMsg = '请先登录,否则无法加入到购物车中!'
              this.addSuccess = false
              break
            case 0:
              this.modalMsg = '加入购物车成功!'
              this.addSuccess = true
              this.$store.commit('addCartCount')
              break
            case 1:
              this.modalMsg = '加入购物车失败!请稍后再试！'
              this.addSuccess = false
              break
          }
          this.modalShow = true
        })
      },
      closeModal() {
        this.modalShow = false
      }
    },
    mounted() {
      this.getGoodsList()
    }
  }
</script>
